<template>
  <div class="status-bar">
    <div class="label">{{label + ':'}}</div>
    <div class="bar">
        <div class="bar-inner" :style="{width: barWidth, backgroundColor: barColor}"></div>
    </div>
    <div class="num">{{num}}</div>
  </div>
</template>

<script>
export default {
  name: 'status-bar',
  props: ['label', 'num'],
  computed: {
    barWidth: function(){
      return this.num / 100 * 180 / 1080 * 100 + 'vh'
    },
    barColor: function(){
      if(this.num <= 33){
        return '#e32d03'
      }else if(this.num <= 66){
        return '#ff9600'
      }else{
        return '#1fb3b5'
      }
    }
  }
}
</script>

<style scoped>
.status-bar{
  overflow: hidden;
  font-size: 1.12vh;
  line-height: 1.12vh;
  height: 1.12vh;
}
.label, .num, .bar{
  float: left;
}
.label{
  width: 6.3vh;
  color: #27a1bc;
}
.num{
  color: #ffffff;
  margin-left: 1.48vh;
}
.bar{
  background-color: #030a14;
  height: 0.83vh;
  width: 16.67vh;
  margin-left: .3vh;
}
.bar-inner{
  height: 0.83vh;
  transition: all 1s ease;
}
</style>
